<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #demo {
            width: 200px;
            height: 200px;
            background-color: #6fff;
            margin: 50px;
        }
    </style>
</head>

<body>
    <!-- 标签内 => 属性节点 -->
    <div id="demo" class="one two three" title="hello" data-index="0" data-msg="abc" abc="def">
        <span>hello div</span>
    </div>
</body>
<script>
    // 文档节点
    // 元素节点
    // 文本节点
    // 属性节点
    // 注释节点

    // document.getElementById()

    // 节点都是对象

</script>
<script>
    var demo = document.getElementById("demo");

    // 前提: 
    // 1. 所有的节点 都是对象类型  => 元素节点也是对象类型
    // 2. 对象->对一个或一类事物特征(属性)和行为(方法)的描述 => 元素节点上也存在描述该元素的特征(属性)和行为(方法)
    // 3. console.dir() 以键值对的形式打印对象

    // console.dir(demo);

    // 元素节点(html元素)的属性  => 元素节点也是对象类型 => 描述该元素的特征(属性)和行为(方法)  => 元素自带的属性

    // 语法:
    // 元素.属性名
    // 元素["属性名"]

    // Element元素节点的属性 (通用 => 每个元素都有)
    // innerHTML
    // innerText
    // textContent
    // outerText
    // outerHTML
    // value

    // id
    // className
    // classList
    // tagName
    // dataset

    // style   获取和设置内联样式
    // console.log(demo.style);

    // 设置 => JS操作元素改变样式时,都是通过内联样式实现的
    // demo.style.width = "400px";
    // demo.style.height = "400px";

    // 获取 => style只能获取内联样式(至于内部样式 外部样式 默认样式 都无法获取)
    // console.log(demo.style);  // {width:xxx,height:xxx}
    // console.log(demo.style.width);
    // console.log(demo.style.height);




    // 获取非行内样式 (内部样式 外部样式 默认样式)
    // window.getComputedStyle(ele)  => 传入元素,返回该元素所有css样式的声明(对象  => 包含内部样式 外部样式 内联样式 默认样式)

    // console.log(window.getComputedStyle(demo));
    // console.log(window.getComputedStyle(demo).width);
    // console.log(window.getComputedStyle(demo).height);
    // console.log(window.getComputedStyle(demo).marginLeft);
    // console.log(window.getComputedStyle(demo).backgroundColor);
    // console.log(window.getComputedStyle(demo).fontSize);


    // 但是 IE低版本(ie8以及一下) 没有这个方法 (了解)
    // console.log(window.getComputedStyle(demo));

    // IE低版本 => 所有css样式的声明对象存储在元素节点上
    // console.log(demo.currentStyle);
    // console.log(demo.currentStyle.width);
    // console.log(demo.currentStyle.height);

    // 兼容写法(常规浏览器的写法和IE写法不一样 => 兼容两个)

    // if (window.getComputedStyle) { // 有方法 => 常规
    //     console.log(window.getComputedStyle(demo).width);
    // } else {
    //     console.log(demo.currentStyle.width);
    // }

    // if (window.getComputedStyle) { // 有方法 => 常规
    //     console.log(window.getComputedStyle(demo).height);
    // } else {
    //     console.log(demo.currentStyle.height);
    // }


    function getStyle(ele, key) {
        // window.getComputedStyle => 有方法 => 函数 => 转布尔值true
        // window.getComputedStyle => 没有方法 => undefined => 转布尔值false
        if (window.getComputedStyle) { // 有方法 => 常规
            return window.getComputedStyle(ele)[key];
        } else { // 没有这个方法(取值得到undefined) => IE
            return ele.currentStyle[key];
        }
    }


    console.log(getStyle(demo, "width"));
    console.log(getStyle(demo, "height"));











</script>

</html>